<template>
  <div class="action-list">
    <div style="margin-bottom: 10px;">
      <a-button icon="plus" shape="round" @click="addNewAction" type="primary">新建</a-button>
      <a-button icon="copy" shape="round" @click="copyNewAction" style="margin-left: 5px">复制</a-button>
    </div>
    <HTable :pagination="false" :configurable="false" @selectChange="selectChange" ref="table"
            :data-source="actions" :columns="columns" select="single" :action-width="100">
      <template slot="action" slot-scope="text, record, index">
        <a v-show="!record.presetAction" @click.stop="() => remove(record, index)">删除</a>
      </template>
    </HTable>
    <FormActionModal :formDefinition="formDefinition" ref="FormActionModal" @ok="formActionModalOK"/>
  </div>
</template>
<script>
import HTable from '@/components/hhd/design/HTable/HTable.vue';
import {createModelForVue, createProps, guid} from '@/utils';
import {actionTypes, getDictTitle} from '@/components/hhd/design/Constants';
import FormActionModal from '@/components/hhd/design/FormAction/FormActionModal.vue';

export default {
  name: 'ActionList',
  components: {FormActionModal, HTable},
  model: createModelForVue('selectedAction'),
  props: {
    actions: createProps(Array),
    selectedAction: createProps(Object, () => undefined),
    formDefinition: createProps(Object, () => undefined),
  },
  data() {
    return {
      columns,
      selectedRowKeys: [],
      selectAction: undefined
    };
  },
  methods: {
    addNewAction() {
      this.$refs.FormActionModal.open();
    },
    formActionModalOK(action) {
      this.actions.push(action);
      this.$refs.table.setSelectedRowKeys([action.id]);
      this.$emit('change', action);
    },
    selectChange({selectRows}) {
      this.$emit('change', this.selectAction = selectRows && selectRows.length && selectRows[0] || undefined);
    },
    copyNewAction() {
      if (!this.selectAction) {
        this.$message.error("请选择一项复制");
        return;
      }
      let data = JSON.parse(JSON.stringify(this.selectAction));
      data.id = guid();
      data.actionName += '(副本)'
      data.system = false;
      this.actions.push(data);
    },
    remove(record, index) {
      this.$confirm({
        okText: '确定',
        cancelText: '取消',
        title: '确定删除吗?',
        content: '删除后不可恢复, 确定删除吗?',
        onOk: () => {
          if (this.selectedAction && (this.selectedAction.id === record.id)) {
            this.$emit('change', undefined);
          }
          this.$refs.table.clearSelection();
          this.actions.splice(index, 1);
        }
      });
    },
  }
};

const columns = [
  {
    title: '操作权限名称',
    dataIndex: 'actionName',
    ellipsis: true
  },
  {
    title: '操作类型',
    dataIndex: 'actionType',
    customRender: (text, record, index) => {
      return getDictTitle(record.actionType, actionTypes);
    }
  },
  {
    title: '类别',
    dataIndex: 'system',
    customRender: (text, record, index) => {
      return record.system === true ? '系统权限' : '用户权限';
    }
  }
];
</script>
<style>
.action-list {
  height: 100%;
  border: 1px solid #e2e4e9;
  background: white;
  padding: 10px;
}
</style>